<template>
  <view>
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
    	<block slot="backText">返回</block>
    	<block slot="content">账号与安全</block>
    </cu-custom>
	<view class="cu-list menu card-menu text-grey" style="margin-top: 10px;">
		<van-collapse accordion :value="activeName" @change="onChange()">
		  <van-collapse-item title="更改联系电话" name="1" class="label">
				  <van-field :value="userInfo.mobile || ''" label="原联系电话" readonly=true placeholder="请输入原联系电话"/>
				  <van-field :value="inputForm.mobile" label="新联系电话" placeholder="请输入新联系电话" name="mobile" @change="inputForm.mobile = $event.mp.detail"/>
				  <button class="cu-btn block bg-blue margin-tb-sm lg" @click="updatePhone">保存联系电话</button>
		  </van-collapse-item>
		  <van-collapse-item title="更改邮箱" name="2" class="label">
				  <van-field :value="userInfo.email || ''" label="原邮箱" readonly=true placeholder="请输入原邮箱"/>
				  <van-field :value="inputForm.email" label="新邮箱" placeholder="请输入新邮箱" name="email" @change="inputForm.email = $event.mp.detail"/>
				  <button class="cu-btn block bg-blue margin-tb-sm lg" @click="updateEmail">保存邮箱</button>
		  </van-collapse-item>
		  <van-collapse-item title="更改密码" name="3" class="label">
					<view class="cu-form-group margin-top">
						<view class="title"> <text class="red-color">*</text> 旧密码</view>
						<input placeholder="请输入原密码" type="password" v-model="inputForm.oldPassword" name="oldPassword"></input>
					</view>
					<view class="cu-form-group">
						<view class="title"><text class="red-color">*</text>新密码</view>
						<input placeholder="请输入新密码" type="password" v-model="inputForm.newPassword" name="newPassword"></input>
					</view>
					<view class="cu-form-group">
						<view class="title"><text class="red-color">*</text>确认新密码</view>
						<input placeholder="请确认新密码" type="password" v-model="inputForm.confirmNewPassword" name="confirmNewPassword"></input>
					</view>
					<view class="padding-xl">
						<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg" @click="pwdSubmit">更改密码</button>
					</view>
		  </van-collapse-item>
		</van-collapse>
	</view>
  </view>
</template>

<script>
  import {mapState, mapMutations, mapActions} from 'vuex'
  var  graceChecker = require("@/common/graceChecker.js")
  export default {
	  data () {
	  	return {
	  		loading: false,
			activeName: [],
	  		inputForm: {
	  			email:'',
				mobile:'',
				oldPassword:'',
				newPassword:'',
				confirmNewPassword:''
	  		}
	  	}
	  },
	onShow() {
		this.$auth.checkLogin()
	},
	computed: mapState({
		 userInfo: (state) => state.user.userInfo,//登录人的信息
		 avatar: (state) => state.user.avatar
		}),
    methods: {
	  ...mapActions(['refreshUserInfo']),
	  //更新电话号码
	  updatePhone(){
		  uni.showLoading({title: '提交中'})
		  var reg = /^[0-9]{6,15}$/;//6到15位纯数字正则
		  if(reg.test(this.inputForm.mobile)){
			  let form = this.userInfo
			  form.mobile = this.inputForm.mobile
			  this.$http.post('/sys/user/saveInfo',form).then((data)=>{
				 uni.showToast({ title: "更改成功", icon: "success" })
				 this.refreshUserInfo()
				 this.inputForm.mobile = ''
			  })
		  }else{
			uni.showToast({title: "输入有误", icon: "none"})
		  }
	  },
	  //更新Email
	  updateEmail(){
		    uni.showLoading({title: '提交中'});
			var rule = [
				{name:"email", checkType : "email", checkRule: "",  errorMsg:"邮箱格式有误"}
			];
			//进行表单检查
			var formData = this.inputForm
			let checkRes = graceChecker.check(formData, rule)
			if(checkRes){
			  let form = this.userInfo
	  		  form.email = this.inputForm.email
	  		  this.$http.post('/sys/user/saveInfo',form).then((data)=>{
	  			 uni.showToast({ title: "更改成功", icon: "success" })
	  		 	 this.refreshUserInfo()//刷新用户信息
				 this.inputForm.email = ''
	  		  })
			}else{
				uni.showToast({title: "输入有误", icon: "none"})
			}
	  },
	  onChange(event) {
	     this.activeName = event.detail
	  },
	  pwdSubmit() {
		  uni.showLoading({title: '提交中'})
		  var obj = {}
		  obj.oldPassword = this.inputForm.oldPassword
		  obj.newPassword = this.inputForm.newPassword
		  obj.confirmNewPassword = this.inputForm.confirmNewPassword
	      //定义表单规则
	      var rule = [
	          {name:"oldPassword", checkType : "notnull", checkRule:"",  errorMsg:"密码不能为空"},
	          {name:"newPassword", checkType : "notnull", checkRule:"",  errorMsg:"新密码不能为空"},
	          {name:"confirmNewPassword", checkType : "notnull", checkRule:"",  errorMsg:"确认新密码不能为空"},
	  		  {name:"confirmNewPassword", checkType : "same", checkRule: obj.newPassword,  errorMsg:"两次输入的新密码不一致，请重新输入!"}
	      ]
	      //进行表单检查
	      var formData = obj
	      let checkRes = graceChecker.check(formData, rule)
	      if(checkRes){
	  		uni.showLoading()
	  		this.$http.post(`/app/sys/user/savePwd`,formData).then(({data}) => {
	  			uni.showToast({title:"更改成功", icon:"success"})
				this.inputForm.oldPassword = ''
				this.inputForm.newPassword = ''
				this.inputForm.confirmNewPassword = ''
				uni.navigateTo({
				  url: '/pages/login/login'
				})
	  		}).catch((e)=>{
	  			
	  		})
	      }else{
	          uni.showToast({ title: graceChecker.error, icon: "none" })
	      }
	  }
    }
  }
</script>

<style>
</style>